<template>
  <div class="app-container">
    <el-form
      ref="elForm"
      :disabled="$route.query.isInfo"
      :model="formData"
      :rules="rules"
      size="medium"
      label-width="120px"
    >
      <h2 style="text-align: center">设备期间核查计划</h2>
      <h4 class="form-header h4">基本信息</h4>
      <el-row :gutter="15">
        <el-col :span="8">
          <el-form-item label="设备管理员" prop="managerUserId">
            <UserDialog
              placeholder="请选择设备管理员"
              @change="changeCultivate"
              v-model="formData.managerUserId"
            ></UserDialog>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="质量负责人" prop="massUserId">
            <UserDialog
              placeholder="请选择质量负责人"
              @change="changeExamine"
              v-model="formData.massUserId"
            ></UserDialog>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="日期" prop="planDate">
            <el-date-picker
              v-model="formData.planDate"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              :style="{ width: '100%' }"
              placeholder="请选择日期"
              clearable
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <h4 class="form-header h4">
        设备期间核查计划
        <el-button type="primary" plain size="mini" @click="handleAdd"
          >增行</el-button
        >
        <el-button type="danger" plain size="mini" @click="handleDele"
          >删行</el-button
        >
      </h4>
      <el-table :data="formData.itemList" :border="true" style="width: 100%">
        <el-table-column label="序号" type="index" align="center" />
        <el-table-column
          width="150"
          label="设备编号"
          prop="deviceCode"
          align="center"
        >
          <template slot-scope="scope">
            <el-form-item
              label-width="0"
              :prop="`itemList.${scope.$index}.deviceCode`"
              :rules="rules.deviceCode"
            >
              <el-select
                v-model="scope.row.deviceCode"
                placeholder="请选择设备编号"
                clearable
                @change="changeDevice($event, scope.$index)"
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in deviceOptions"
                  :key="index"
                  :label="item.deviceCode"
                  :value="item.deviceCode"
                  :disabled="item.disabled"
                >
                  <span style="float: left">{{ item.deviceName }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{
                    item.deviceCode
                  }}</span></el-option
                >
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column
          prop="deviceName"
          width="150"
          label="设备名称"
          align="center"
        >
        </el-table-column>
        <el-table-column
          label="计划核查日期"
          prop="price"
          width="150"
          align="center"
        >
          <template slot-scope="scope">
            <el-form-item
              label-width="0"
              :prop="`itemList.${scope.$index}.planCheckDate`"
              :rules="rules.planCheckDate"
            >
              <el-date-picker
                v-model="scope.row.planCheckDate"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                :style="{ width: '100%' }"
                placeholder="请选择计划核查日期"
                clearable
              ></el-date-picker>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column
          label="实际核查日期"
          prop="price"
          width="150"
          align="center"
        >
          <template slot-scope="scope">
            <el-form-item
              label-width="0"
              :prop="`itemList.${scope.$index}.actCheckDate`"
              :rules="rules.actCheckDate"
            >
              <el-date-picker
                v-model="scope.row.actCheckDate"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                :style="{ width: '100%' }"
                placeholder="请选择实际核查日期"
                clearable
              ></el-date-picker>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column
          label="核查周期"
          prop="price"
          min-width="200"
          align="center"
        >
          <template slot-scope="scope">
            <el-form-item
              label-width="0"
              :prop="`itemList.${scope.$index}.checkPeriod`"
              :rules="rules.checkPeriod"
            >
              <el-input
                v-model="scope.row.checkPeriod"
                placeholder="请输入核查周期"
                clearable
                :style="{ width: '100%' }"
              >
                <template slot="append">个月</template>
              </el-input>
              <!-- <el-date-picker
                type="month"
                v-model="scope.row.checkPeriod"
                format="yyyy-MM"
                value-format="yyyy-MM"
                :style="{ width: '100%' }"
                placeholder="请选择核查周期"
                clearable
              ></el-date-picker> -->
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column width="150" label="规格" prop="spec" align="center">
        </el-table-column>

        <el-table-column
          label="扩展不确定度/最大允差/准确度等级"
          align="center"
          width="150"
        >
          <template slot-scope="scope">
            <el-form-item
              label-width="0"
              :prop="`itemList.${scope.$index}.devicePrecision`"
              :rules="rules.devicePrecision"
            >
              <el-input
                disabled
                v-model="scope.row.devicePrecision"
                placeholder="请输入扩展不确定度/最大允差/准确度等级"
              ></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column width="150" label="期间核查作业指导书" align="center">
          <template slot-scope="scope">
            <el-form-item
              label-width="0"
              :prop="`itemList.${scope.$index}.guide`"
              :rules="rules.guide"
            >
              <el-input
                v-model="scope.row.guide"
                placeholder="请输入期间核查作业指导书"
              ></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column width="150" label="期间核查方式" align="center">
          <template slot-scope="scope">
            <el-form-item
              label-width="0"
              :prop="`itemList.${scope.$index}.checkType`"
              :rules="rules.checkType"
            >
              <el-select
                v-model="scope.row.checkType"
                filterable
                placeholder="请选择期间核查方式"
              >
                <el-option
                  v-for="dict in dict.type.sys_device_check_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>

        <!-- <el-table-column width="150" label="核查记录表编号" align="center">
          <template slot-scope="scope">
            <el-form-item
              label-width="0"
              :prop="`itemList.${scope.$index}.checkCode`"
              :rules="rules.checkCode"
            >
              <el-input
                v-model="scope.row.checkCode"
                placeholder="请输入核查记录表编号"
              ></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column width="150" label="结果" align="center">
          <template slot-scope="scope">
            <el-form-item
              label-width="0"
              :prop="`itemList.${scope.$index}.result`"
              :rules="rules.result"
            >
              <el-input
                v-model="scope.row.result"
                placeholder="结果"
              ></el-input>
            </el-form-item>
          </template>
        </el-table-column> -->
      </el-table>

      <el-col :span="24">
        <el-form-item
          label-width="0"
          style="text-align: center; margin-top: 30px"
        >
          <el-button
            v-if="!$route.query.isInfo"
            type="primary"
            @click="submitForm"
            >提交</el-button
          >
          <el-button :disabled="false" @click="resetForm">返回</el-button>
        </el-form-item>
      </el-col>
    </el-form>
  </div>
</template>

<script>
import { deptTreeSelect } from "@/api/system/user.js";
import { listSelect } from "@/api/device/device.js";
import {
  deviceCheckPlanAdd,
  updategdeviceCheckPlan,
  deviceCheckPlanInfo,
} from "@/api/device/deviceCheckPlan.js";
export default {
  components: {},
  dicts: ["sys_device_check_type"],
  props: [],
  data() {
    return {
      formData: {
        itemList: [
          {
            deviceId: undefined,
            spec: undefined,
            planCheckDate: null,
            deviceCode: undefined,
            devicePrecision: undefined,
            guide: undefined,
            checkType: undefined,
            checkPeriod: null,
            actCheckDate: null,
            checkCode: undefined,
            result: undefined,
          },
        ],
        planDate: undefined,
        deviceCode: undefined,
        deviceId: undefined,
        useInfo: undefined,
        num: undefined,
        code: undefined,
        managerUserId: null,
        statusType: "1",
        deptId: undefined,
        accord: undefined,
        codeRange: undefined,
      },
      deptOptions: [],
      rules: {
        devicePrecision: [
          {
            required: true,
            message: "请输入扩展不确定度/最大允差/准确度等级",
            trigger: "blur",
          },
        ],
        guide: [
          {
            required: true,
            message: "请输入期间核查作业指导书",
            trigger: "blur",
          },
        ],
        checkType: [
          {
            required: true,
            message: "请输入期间核查方式",
            trigger: "blur",
          },
        ],
        checkCode: [
          {
            required: true,
            message: "请输入核查记录表编号",
            trigger: "blur",
          },
        ],
        result: [
          {
            required: true,
            message: "请输入结果",
            trigger: "blur",
          },
        ],
        checkPeriod: [
          {
            required: true,
            message: "请输入周期",
            trigger: "change",
          },
        ],
        actCheckDate: [
          {
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        planDate: [
          {
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        planCheckDate: [
          {
            required: true,
            message: "请选择计划核查日期",
            trigger: "change",
          },
        ],
        deviceId: [
          {
            required: true,
            message: "请输入设备名称",
            trigger: "blur",
          },
        ],
        deviceCode: [
          {
            required: true,
            message: "请输入设备编号",
            trigger: "blur",
          },
        ],

        useInfo: [
          {
            required: true,
            message: "请输入设备用途",
            trigger: "blur",
          },
        ],
        remark: [
          {
            required: true,
            message: "其他说明不能为空",
            trigger: "blur",
          },
        ],
        code: [
          {
            required: true,
            message: "请输入出厂编号",
            trigger: "blur",
          },
        ],
        managerUserId: [
          {
            required: true,
            message: "请选择设备管理员",
            trigger: "change",
          },
        ],
        examinedUserId: [
          {
            required: true,
            message: "请选择被质量负责人",
            trigger: "change",
          },
        ],
        examineDate: [
          {
            required: true,
            message: "请选择考核日期",
            trigger: "change",
          },
        ],
        cultivateDate: [
          {
            required: true,
            message: "请选择培训日期",
            trigger: "change",
          },
        ],
      },

      deviceOptions: [],
    };
  },
  computed: {},
  created() {
    this.listSelect();
    if (this.$route.query.isEdit || this.$route.query.isInfo) {
      this.getinfo();
    }
    this.getDeptTree();
  },
  mounted() {},
  methods: {
    handleAdd() {
      this.formData.itemList.push({
        deviceId: undefined,
        spec: undefined,
        planCheckDate: null,
        deviceCode: undefined,
        devicePrecision: undefined,
        guide: undefined,
        checkType: undefined,
        checkPeriod: null,
        actCheckDate: null,
        checkCode: undefined,
        result: undefined,
      });
    },
    handleDele() {
      if (this.formData.itemList.length == 1) return;
      this.formData.itemList.pop();
    },
    /** 查询部门下拉树结构 */
    getDeptTree() {
      deptTreeSelect().then((response) => {
        this.deptOptions = response.data;
      });
    },
    changeDevice(i, index) {
      let row = this.deviceOptions.find((e) => e.deviceCode == i);
      if (row) {
        this.formData.itemList[index].deviceCode = row.deviceCode;
        this.formData.itemList[index].deviceId = row.deviceId;
        this.formData.itemList[index].devicePrecision = row.checkLevel;

        this.formData.itemList[index].deviceName = row.deviceName;
        this.formData.itemList[index].spec = row.spec;
      } else {
        this.formData.itemList[index].deviceName = undefined;
        this.formData.itemList[index].deviceId = undefined;
        this.formData.itemList[index].devicePrecision = undefined;

        this.formData.itemList[index].deviceCode = undefined;
        this.formData.itemList[index].spec = undefined;
      }
    },
    changeExamined(e, i) {
      this.formData.itemList[i].examinedUserName = e.nickName;
    },
    changeExamine(e) {
      this.formData.massUserName = e.nickName;
    },
    changeCultivate(e) {
      console.log(e);
      this.formData.managerUserName = e.nickName;
    },
    listSelect() {
      listSelect({ status: 1, busStatus: -1 }).then((response) => {
        this.deviceOptions = response.data;
      });
    },
    getinfo() {
      deviceCheckPlanInfo(this.$route.query.id).then((response) => {
        this.formData = response.data;
      });
      console.log(this.content);
    },
    submitForm() {
      // this.$refs["elForm"].validate((valid) => {
      //   if (valid) {
          let query = JSON.parse(JSON.stringify(this.formData));
          if (this.formData.deviceCheckPlanId != undefined) {
            updategdeviceCheckPlan(query).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.resetForm();
            });
          } else {
            deviceCheckPlanAdd(query).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.resetForm();
            });
          }
      //   }
      // });
    },
    resetForm() {
      const obj = { path: "./deviceCheckPlan" };
      this.$tab.closeOpenPage(obj);
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-form-item {
  margin-top: 20px !important;
}
</style>
